<template>
	<div class="container">
		<div class="box">
			<input :class="{'active': isActive1,'btn':true}" type="button" value="处理进度" @click="progressHandle()">
			<input :class="{'active': isActive2,'btn':true}" type="button" value="查看详情" @click="viewDetails()">
		</div>
		<table>
			<thead>
				<tr>
					<th class="po-re w-300">建议内容</th>
					<th>建议人</th>
					<th>联系方式</th>
					<th>工作单位</th>
					<th>党内职务</th>
					<th>政治面貌</th>
					<th>建议时间</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="po-re w-300 txt-overh">辩论会、交流会、讨论会但前提是</td>
					<td>高博</td>
					<td>18612345678</td>
					<td class="po-re w-200 txt-overh">郑州交警支队一大队</td>
					<td>办事员</td>
					<td>党员</td>
					<td>2019-2-22</td>
				</tr>
				<tr>
					<td class="po-re w-300 txt-overh">辩论会、交流会、讨论会但前提是</td>
					<td>高博</td>
					<td>18612345678</td>
					<td class="po-re w-200 txt-overh">西南绕城高速大队一中队</td>
					<td>办事员</td>
					<td>党员</td>
					<td>2019-2-22</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isActive1:false,
				isActive2:false
			}
		},
		methods: {
			progressHandle(){
				this.isActive1 = !this.isActive1?true:false;
			},
			viewDetails(){
				this.isActive2 = !this.isActive2?true:false;
			}
		},
	}	
</script>

<style scoped="scoped">
	.box{
		margin-top: 20px;
		margin-bottom: 30px;
		text-align: center;
	}
	.box .btn{
		padding: 5px 20px;
		border:none;
		border-radius: 5px;
		background-color: #F6E9B2;
		outline-color:#F6E9B2;
		color: #C8201F;
	}
	.box .btn.active{
		background-color: #C50C11;
		outline-color:#C50C11;
		color: #fff;
	}
	table{
		width:100%;
		background-color: #FDFAF5;
	}
	thead{
		line-height: 35px;
		color: #C8201F
	}
	thead th,tbody td{
		border-bottom: 1px solid #F1EEE9;
		text-align: center;
	}
	tbody tr{
		line-height: 50px;
		color: #5D5B5C;
	}
	tbody tr td:first-child{
		color: #8AC3FB
	}
</style>
